<template lang="html">
    <div class="shop-wrapper">
      <div class="shopheader-wrapper">
      <div class="back">
          <router-link tag="i" to="/index" class="icon iconfont icon-jiantou1"></router-link>
      </div>
      <div class="shop-main">
          <img :src="seller.avatar" alt="">
          <div class="shop-content">
              <h4>{{seller.name}}</h4>
              <div class="shop-dilivery">
                  <span>商家配送 / {{seller.deliveryTime}} 分钟送达 / 配送费￥{{seller.deliveryPrice}} 元</span>
                  <i class="icon iconfont icon-jiantou1"></i>
              </div>
              <div class="shop-notice">
                  <span>公告 : </span>
                  <span>欢迎光临用餐高峰下单</span>
              </div>
          </div>
      </div>
      <div class="background">
          <img :src="seller.avatar" width="100%" height="100%" alt="">
      </div>
    </div>

    <div class="shop-tab-container">
             <div class="shop-tab-tab">
                 <span class="active">商品</span>
             </div>
             <div class="shop-tab-tab">
                 <span>评价</span>
             </div>
    </div>

      <menuview></menuview>
    </div>
</template>

<script>
import menuview from '@/components/menuview';
export default {
  components:{
    menuview
  },
  data(){
    return{
       seller:{
         type:Array
       }
    }
  },
  mounted(){
    let idx=this.$route.params.idx;
     this.axios.get('/api/seller').then(res=>{
       let sellers=res.data.data;
       this.seller=sellers[idx];

     })
  }
}
</script>

<style lang="less">
@import '../../static/less/var.less';
.shop-wrapper{
  .shopheader-wrapper {
      height: @base*262rem;
      position: relative;
      background: rgba(7,17,27,0.4);
      .back {
          height: @base*56rem;
          padding: @base*8rem @base*20rem;
          i {
              padding: @base*10rem;
              color: #fff;
              font-size: @base*50rem;

          }
      }
      .shop-main {
          height: @base*130rem;
          padding: 0 @base*10rem;
          display: flex;
          justify-content: space-between;
          img {
              width: @base*126rem;
              height: @base*126rem;
              border: 1px solid #fff;
              border-radius: 10px;
          }
          .shop-content {
              position: relative;
              width: @base*550rem;
              h4 {
                  font-size: @base*32rem;
                  padding: 0;
                  margin: 0;
                  color: #fff;
              }
              .shop-dilivery {
                  display: flex;
                  justify-content: space-between;
                  font-size: @base*12rem;
                  color: #fff;
              }
              .shop-notice {
                  font-size: @base*10rem;
                  color: #fff;
              }
          }
      }
      .background {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          filter:blur(15px);
      }
  }
  .shop-tab-container {
    background: #fff;
    height: @base*92rem;
    text-align: center;
    line-height: @base*92rem;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    .shop-tab-tab {
        width: 50%;
        height: 100%;
        span.active {
            padding: 0 @base*10rem @base*10rem;
            color:@mc;
            border-bottom: 2px solid #333;
        }
    }
}

}

</style>
